AZR · DECK STAGE DOCUMENTATION · 14
توثيق
الشرائح
كيف تبني شريحة آزر صحيحة على 1920×1080. القواعد والقوالب والقالب الجاهز للنسخ.
1920 × 1080
6 أنواع شرائح
100px هوامش
24px حد أدنى للخط
SETUP · التحميل والتهيئة
ثلاثة أسطر — ثم تبدأ
deck-stage.js وحيد الملف ويعالج التحجيم والتصفح ولوحة المصغّرات والطباعة. لا تبعيات خارجية.
<!-- 1. حمّل المكتبة --> <script src="deck-stage.js"></script> <!-- 2. أخفِ الشريحة حتى تُعرَّف لتجنب الوميض --> <style>deck-stage:not(:defined){visibility:hidden}</style> <!-- 3. ضع شرائحك كـ <section> مباشرة --> <deck-stage width="1920" height="1080"> <section data-label="الغلاف"> <!-- محتوى الشريحة --> </section> <section data-label="الشريحة الثانية"> <!-- محتوى الشريحة --> </section> </deck-stage>
data-label
اسم الشريحة في شريط المصغّرات. استخدم دائماً.
data-deck-skip
تخطي الشريحة في التصفح — تظل في الـDOM.
goTo(n)
للتنقل برمجياً: document.querySelector('deck-stage').goTo(0)
MOBILE CARD MODE v2.2 · وضع الجوال بعناوين مقروءة
على الشاشات ≤ 640px، الشريحة المُصغَّرة لا تُقرأ. سمة mobile-card تفعّل وضعاً عمودياً: المركّب يحقن قبل كل شريحة عنواناً مقروءاً (رقم الشريحة + data-label بخط 20px) فوق الصورة المصغّرة، ثمّ تتراكم البطاقات بعرض الشاشة الكامل وتحافظ على نسبة 16:9. العنوان يبقى بحجمه الطبيعي — لا يتأثر بـ--mobile-zoom.
<deck-stage width="1920" height="1080" mobile-card> <!-- الشرائح كما هي --> </deck-stage>
المُفعِّل
سمة mobile-card
الشرط
viewport ≤ 640px (تلقائي)
الإلغاء
احذف السمة — يعود التصفّح الافتراضي
ملاحظة: العنوان المقروء فوق كل بطاقة يُستخرج من سمة data-label على الشريحة (إن لم توجد، يعرض «Slide N»). في الوضع العمودي يُخفى شريط المصغّرات والتراكب — التمرير العمودي هو التنقل، وكل بطاقة = عنوان مقروء + صورة مصغّرة للمحتوى الأصلي.
SLIDE ANATOMY · تشريح الشريحة
المنطقة الآمنة — ست طبقات
كل شريحة آزر مبنية من ست طبقات بترتيب ثابت. لا تعديل على هذا الترتيب.
طبقة 1 · الخلفية
paper / ink / p-900
اللون الأساسي للشريحة
طبقة 2 · النمط
p-400/p-500 بعتامة 4–16%
خلف كل شيء دائماً
طبقة 3 · شريط الأكسنت
5px × p-500
أعلى الشريحة دائماً
طبقة 4 · الشعار
أعلى اليسار · 28px · 55%
ثابت في كل شريحة
طبقة 5 · التكوين الهندسي
اللغة الهندسية · p-500
فوق النمط، تحت النص
طبقة 6 · المحتوى
نص + أرقام + جداول
يقود دائماً
المنطقة الآمنة: 100px أفقياً × 80px رأسياً من حواف الشريحة. لا محتوى خارج هذه الحدود. استثناء: النمط والخلفية يملآن كامل الشريحة.
SLIDE TYPES · أنواع الشرائح
ستة أنواع — لكل منها بنية
كل نوع له ترتيب طبقات وأحجام نص محددة. لا تمزج بين الأنواع في شريحة واحدة.
RULES · القواعد الحاكمة
القواعد — افعل / لا تفعل
كل قاعدة لها سبب. القواعد لا تُناقَش — تُطبَّق.
العنصر
✓ افعل
✗ لا تفعل
حجم الخط
24px كحد أدنى مطلق. العنوان الرئيسي ≥56px
لا خط أصغر من 24px في أي شريحة
خلفية الشريحة
paper · sand · ink · p-500 · p-800 · p-900
لا ألوان مخصصة · لا تدرجات · لا صور كخلفية
الشعار
PNG/SVG · أعلى اليمين (RTL) · 28px · opacity .55
لا نص يعوّض الشعار · لا تغيير الحجم
الأنماط
نمط واحد فقط · p-500 · عتامة 4–16%
لا نمطين · لا ألوان أخرى للنمط · لا مع نظام A
التكوين الهندسي
p-500 فقط · حسب دور A–F
لا ألوان أخرى · لا أشكال خارج الأبجدية
الحركة
120–720ms · cubic-bezier(0.22,0.61,0.36,1)
لا bounce · لا حركة لانهائية · لا ease-in-out
التكثيف
فكرة واحدة بوضوح في الشريحة الواحدة
لا ثلاثة عناوين · لا نص يملأ الشريحة كاملاً
المسافات
مضاعفات 8px دائماً
لا 17px · لا 25px · لا قيم عشوائية
خطأ شائع: استخدام الخط العربي بوزن 900 — هذا الوزن غير موجود في IBM Plex Sans Arabic. الأوزان المسموحة: 300 · 400 · 500 · 700 فقط.
BASE TEMPLATE · القالب الكامل
نسخ — وابدأ
قالب HTML كامل جاهز. يحتوي على شرائح الأنواع الستة. احذف ما لا تحتاجه وعدّل المحتوى.
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title>آزر · اسم العرض</title> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet"/> <script src="deck-stage.js"></script> <style> :root{ --paper:#FBF8F1; --sand:#F2EDE3; --ink:#1B1815; --deep:#120F0C; --p500:#5B3CC4; --p400:#7D5CD0; --p300:#A78CE5; --p900:#160D3A; --ar:'IBM Plex Sans Arabic',sans-serif; --serif:'Instrument Serif',serif; --mono:'JetBrains Mono',monospace; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} body{background:#000;margin:0} deck-stage:not(:defined){visibility:hidden} /* ── المساعدات المشتركة */ .bar{position:absolute;top:0;left:0;right:0;height:5px;background:var(--p500);z-index:10} .logo{position:absolute;top:40px;right:56px;z-index:10} .logo img{height:28px;width:auto;opacity:.55} .pat{position:absolute;inset:0;pointer-events:none;z-index:1} .geo{position:absolute;inset:0;pointer-events:none;z-index:2} .ct{position:absolute;inset:0;padding:80px 100px;display:flex;flex-direction:column;z-index:3} .ct-end{justify-content:flex-end} .ct-center{align-items:center;justify-content:center;text-align:center} .ey{font-family:var(--mono);font-size:18px;letter-spacing:.2em;margin-bottom:16px} .h1{font-size:100px;font-weight:700;line-height:.88;letter-spacing:-.025em} .h2{font-size:76px;font-weight:700;line-height:.9;letter-spacing:-.02em} .h3{font-size:56px;font-weight:700;line-height:.93;letter-spacing:-.015em} .sub{font-size:28px;line-height:1.55;opacity:.5;margin-top:18px} </style> </head> <body> <deck-stage width="1920" height="1080"> <!-- ═══ 01 · الغلاف ═══ --> <section data-label="الغلاف" style="position:relative;background:var(--ink)"> <div class="bar"></div> <div class="logo"><img src="assets/azr-wordmark-cream.png" alt="azr"/></div> <div class="ct ct-end"> <div class="ey" style="color:rgba(255,255,255,.28)">العنوان الفرعي</div> <div class="h1" style="color:white">عنوان
الغلاف</div> </div> </section> <!-- ═══ 02 · الـInsight ═══ --> <section data-label="الاكتشاف" style="position:relative;background:var(--paper)"> <div class="bar"></div> <div class="logo"><img src="assets/azr-wordmark-ink.png" alt="azr"/></div> <div class="ct ct-end"> <div class="ey" style="color:var(--p500)">الاكتشاف</div> <div class="h2" style="color:var(--ink)">نص الفكرة المحورية
<span style="font-weight:300;color:rgba(27,24,21,.45)">السياق الداعم</span></div> </div> </section> <!-- ═══ 03 · الرقم الكبير ═══ --> <section data-label="البيانات" style="position:relative;background:var(--paper)"> <div class="bar"></div> <div class="logo"><img src="assets/azr-wordmark-ink.png" alt="azr"/></div> <div class="ct ct-center"> <div style="font-family:var(--serif);font-style:italic;font-size:220px;color:var(--p500);line-height:.85">٣×</div> <div style="font-size:32px;color:rgba(27,24,21,.45);margin-top:18px">وصف الرقم وسياقه</div> </div> </section> <!-- ═══ 04 · فاصل القسم ═══ --> <section data-label="فاصل" style="position:relative;background:var(--p900)"> <div class="bar"></div> <div class="logo"><img src="assets/azr-logo-cream.png" alt="azr"/></div> <div class="ct ct-center"> <div class="ey" style="color:rgba(255,255,255,.28)">الفصل الثاني</div> <div class="h2" style="color:white">عنوان القسم</div> </div> </section> <!-- ═══ 05 · القائمة ═══ --> <section data-label="القائمة" style="position:relative;background:var(--paper)"> <div class="bar"></div> <div class="logo"><img src="assets/azr-wordmark-ink.png" alt="azr"/></div> <div class="ct ct-end"> <div class="ey" style="color:var(--p500)">العنوان</div> <div style="display:flex;flex-direction:column;gap:0"> <div style="display:flex;align-items:center;gap:28px;padding:20px 0;border-bottom:1px solid rgba(27,24,21,.08)"><span style="font-family:var(--mono);font-size:22px;color:rgba(27,24,21,.2)">01</span><span style="font-size:44px;font-weight:500">البند الأول</span></div> <div style="display:flex;align-items:center;gap:28px;padding:20px 0;border-bottom:1px solid rgba(27,24,21,.08)"><span style="font-family:var(--mono);font-size:22px;color:rgba(27,24,21,.2)">02</span><span style="font-size:44px;font-weight:500">البند الثاني</span></div> <div style="display:flex;align-items:center;gap:28px;padding:20px 0"><span style="font-family:var(--mono);font-size:22px;color:rgba(27,24,21,.2)">03</span><span style="font-size:44px;font-weight:500">البند الثالث</span></div> </div> </div> </section> <!-- ═══ 06 · الختام ═══ --> <section data-label="الختام" style="position:relative;background:var(--p900)"> <div class="bar"></div> <div class="logo"><img src="assets/azr-logo-cream.png" alt="azr"/></div> <div class="ct ct-center"> <div class="h1" style="color:white;font-size:120px">عنوان الختام</div> <div style="font-family:var(--mono);font-size:22px;color:rgba(255,255,255,.28);margin-top:32px;letter-spacing:.16em">hello@azr.studio</div> </div> </section> </deck-stage> </body> </html>
deck-stage.js موجود في مجلد المشروع. الشعار في assets/ — cream للخلفيات الداكنة، ink للفاتحة.
azr
1920 × 1080 · شريحة واحدة تحكمها ستة قوانين.